<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title></title>
	<style>
		*{
			padding: 0;
			margin: 0;
			box-sizing: border-box;
		}
		
		.box{
			width: 200px;
			height: 200px;
			background-color: #00f;
		}
		
		.fu{
			width: 200px;
			height: 200px;
			background-color: #ccc;
			/* padding-top: 50px; */
			/* border: .1px solid #ccc; */
			overflow: hidden;
		}
		
		.zi{
			width: 50px;
			height: 50px;
			background-color: #0f0;
			margin-top: 50px;
		}
		
		/*
			 上边框塌陷 解决方法：
			 1.给父级设padding-top
			 2.给父级设border
			 3.给父级设overflow: hidden;
			 */
		
	</style>
</head>

<body>
	<div class="box"></div>
	
	<div class="fu">
		<div class="zi"></div>
	</div>
	
	
	
	
	
	


	<div style="height: 100px;"></div>
</body>

</html>